<template>
	<view>
		<view>

			<view class="mainContent">

				<view class="main_content_center">
					<view class="contentTitle">
						<text class="app_name">渠道简介</text>
						<text class="app_price">推广量级</text>
						<text class="app_jiesuan">推广方式</text>
						<text class="app_qq">QQ</text>
						<text class="app_qq">微信</text>
						<text class="app_qq">手机</text>
						<text class="app_ck">查看</text>
						<text class="app_caozuo">操作</text>
					</view>
					<template v-if="tjs.length>0">
						<view class="contentItem" v-for="qd in tjs">
							<view class="contentItem" @click="showDetail(qd)">
								<text class="app_name_tj">推荐:{{qd.QUDAO_QDJJ}}</text>
								<text class="app_price_tj">{{qd.QUDAO_QDLJ + "/月"}}</text>

								<text class="app_jiesuan_tj">{{getQdLeixing(qd)}}</text>
								<view class="app_qq">
									<img src="../../../static/qq.png" v-show="hasQQ(qd)"></img>
									<text v-show="!hasQQ(qd)">-</text>
								</view>
								<view class="app_qq">
									<img src="../../../static/wechat.png" v-show="hasWX(qd)"></img>
									<text v-show="!hasWX(qd)">-</text>
								</view>
								<view class="app_qq">
									<img src="../../../static/phone.png" v-show="hasPhone(qd)"></img>
									<text v-show="!hasPhone(qd)">-</text>
								</view>
								<text class="app_ck_tj">7444</text>
								<text class="app_caozuo_tj">点击查看</text>
							</view>
						</view>
					</template>
					<template v-for="qd in datas">
						<view class="contentItem" >
							<text class="app_name" @click="showDetail(qd)">{{qd.QUDAO_QDJJ}}</text>
							<text class="app_price" @click="showDetail(qd)">{{qd.QUDAO_QDLJ + "/月"}}</text>

							<text class="app_jiesuan">{{gettgfs(qd)}}</text>
							<view class="app_qq">
								<img src="../../../static/qq.png" v-show="hasQQ(qd)"></img>
								<text v-show="!hasQQ(qd)">-</text>
							</view>
							<view class="app_qq">
								<img src="../../../static/wechat.png" v-show="hasWX(qd)"></img>
								<text v-show="!hasWX(qd)">-</text>
							</view>
							<view class="app_qq">
								<img src="../../../static/phone.png" v-show="hasPhone(qd)"></img>
								<text v-show="!hasPhone(qd)">-</text>
							</view>
							<text class="app_ck">{{qd.chakan + "次"}}</text>
							<text class="app_caozuo" @click="showDetail(qd)">查看详情</text>
						</view>
					</template>

					<pageView ref="pageView"></pageView>

				</view>

			</view>

		</view>
	</view>
</template>

<script>
	import pageView from '../../views/PageView.vue'
	export default {
		components: {
			pageView
		},
		created() {
			//注册全局监听事件，搜索后更新界面数据
			uni.$on('showSearchData', (res) => {
					this.search(res);
				}),
				uni.$on(this.pageType, (page) => {
					this.isSearch = false;
					this.getqd(page);
				})
		},
		data() {
			return {

				isSearch: false,
				datas: [],
				tjs: [],
				tag1: 0,
				tag2: 0,
				tag3: 0,
				tglx: null,
				gslx: null,
				pageType: "qdPage",
				page: 1,

			}
		},
		props: {
			msg: String
		},
		mounted() {
			this.$refs.pageView.setType(this.pageType);
			console.log("mountedmountedmounted", this.pageType)
			this.$nextTick(() => {
				this.getqd(1);
			});

		},

		methods: {
			//跳转到产品详情页面
			showDetail(cp) {
				console.log("888888");
				uni.navigateTo({
					url: '../qd/qudaoDetail',
					success: function(res) {
						res.eventChannel.emit('setQD', cp)

					}
				})

			},
			addqd() {
				uni.navigateTo({
					url: './addQd'
				})
			},
			hasQQ(qd) {
				if (this.isNull(qd.QUDAO_QQHM)) {
					return false;
				}
				return true;
			},
			hasWX(qd) {
				if (this.isNull(qd.QUDAO_WXHM)) {
					return false;
				}
				return true;
			},
			hasPhone(qd) {
				if (this.isNull(qd.QUDAO_SJHM)) {
					return false;
				}
				return true;
			},
			isNull(data) {
				if (data == null || data == "") {
					return true;
				}
				return false;
			},

			getqdlx(qd) {
				return this.$Utils.getQdlx(qd.QUDAO_SSLX);
			},
			gettgfs(qd) {
				return this.$Utils.gettgfs(qd.QUDAO_QDLX);
			},

			async getqd(pageNum) {
				this.page = pageNum;
				try {
					const res = await this.$getData({
						url: this.$apis.getAppQuDaosByUser,
						data: {
							page: pageNum,
							userId: this.$PublicData.getUserdata().uid,
						}
					})
					this.datas = res.data.data;
					if (res.data.tj != null) {
						this.tjs = res.data.tj;
					}
					if (this.datas.length < 1 && this.tj.length < 1) {
						$Utils.showToast("没有数据");
					}


				} catch (e) {
					console.log("eee: ", e);
				}
			},
			deleteQd(data) {
				uni.showModal({
					title: '提示',
					content: '是否删除该条数据?',
					showCancel: true,
					success: (res) => {
						if (res.confirm) {
							this.todeleteQD(data);
						}
					}
				});

			},
			async todeleteQD(qd) {
				try {
					const res = await this.$getData({
						url: this.$apis.deleteQdByUser,
						data: {
							qdId: qd.QUDAO_ID,
							uid: this.$PublicData.getUserdata().uid,
						}
					})
					this.$Utils.showToast("删除成功");
					this.getqd(this.page);
					uni.$emit('updateSize', 1);
				} catch (e) {
					console.log("eee: ", e);
				}

			}


		},
	}
</script>

<style>
	. {
		-webkit-box-sizing: border-box; //谷歌浏览器
		-moz-box-sizing: border-box; //火狐浏览器
		box-sizing: border-box;
		margin: 0px;
	}

	.mainContent {
		align-items: center;
		display: flex;
		justify-content: center;
		flex-direction: column;

	}

	.main_content_center {
		min-height: 800px;

	}




	.contentTitle {

		margin-top: 5px;
		align-items: center;
		height: 40px;
		padding-left: 5px;
		padding-right: 5px;
		width: 950px;
		display: flex;
		background: #E5E5E5;
	}

	.contentItem {
		justify-content: center;
		align-items: center;
		height: 50px;
		padding-left: 5px;
		padding-right: 5px;
		width: 950px;
		display: flex;
		border-bottom: 1px solid #E5E5E5;

	}

	.app_name :hover {
		background: #F99B15;
		color: #FFFFFF;
		cursor: pointer;
	}

	.contentItem_content {
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
		white-space: nowrap;
	}

	.contentItem image {
		width: 20px;
		height: 20px;
	}

	.app_name {
		white-space: nowrap;
		display: flex;
		overflow: hidden;
		color: #000000;
		display: flex;
		width: 380px;
	}

	.app_name_tj {
		white-space: nowrap;
		display: flex;
		overflow: hidden;
		color: #F99B15;
		display: flex;
		width: 380px;
	}

	.app_price {
		color: #333;
		justify-content: center;
		display: flex;
		white-space: nowrap;
		display: flex;
		overflow: hidden;
		width: 102px;
	}

	.app_price_tj {
		color: #F99B15;
		justify-content: center;
		display: flex;
		white-space: nowrap;
		display: flex;
		overflow: hidden;
		width: 102px;
	}

	.app_kind {
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 102px;
	}

	.app_kind_tj {
		color: #F99B15;
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 102px;
	}

	.app_qq {
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 102px;
	}

	.app_jiesuan {
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 102px;
	}

	.app_jiesuan_tj {
		color: #F99B15;
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 102px;
	}

	.app_ck {
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 102px;
	}

	.app_ck_tj {
		color: #F99B15;
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 102px;
	}
	
	
	.app_caozuo {
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 102px;
		
	}
	
	.app_caozuo :hover {
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 102px;
		border-radius: 3px;
		background: #FF8C00;
		color: #FFFFFF;
		cursor: pointer;
	}

	

	.app_caozuo_tj {
		color: #F99B15;
		justify-content: center;
		display: flex;
		overflow: hidden;
		width: 102px;
	}



	.click_a {
		background: #F99B15;
		color: #FFFFFF;
	}
</style>
